<template>
  <div class="couponEdit detailView pd-20">
    <Form :model="item"
          label-position="right"
          :label-width="100"
          :rules="rules"
          ref="coupon">
      <FormItem label="名称"
                prop="name">
        <Input v-model="item.name"
               type="text"
               class="w-200"
               placeholder="请输入名称" />
      </FormItem>
      <FormItem label="截止日期"
                prop="validDate"
                required>
        <DatePicker type="date"
                    :options='options3'
                    v-model="item.validDate"
                    placeholder="起始日期"
                    class="datePicker_1"></DatePicker>
      </FormItem>
      <FormItem label="优惠类型"
                prop="couponType"
                required>
        <Select v-model="item.couponType"
                style="width:200px">
          <Option v-for="(couponType,index) in couponTypeList"
                  :value="couponType.code"
                  :key="index">{{ couponType.name
            }}
          </Option>
        </Select>
      </FormItem>
      <FormItem label="订单金额">
        <InputNumber v-model="item.orderMoney"></InputNumber>
      </FormItem>
      <FormItem label="优惠金额">
        <InputNumber v-model="item.subtractMoney"></InputNumber>
      </FormItem>
      <FormItem label="折扣">
        <InputNumber v-model="item.subtract"></InputNumber>
      </FormItem>
      <FormItem label="优惠券数量"
                prop="couponNum"
                required>
        <InputNumber v-model="item.couponNum"></InputNumber>
      </FormItem>
      <FormItem label="有效天数"
                prop="validDay"
                required>
        <InputNumber v-model="item.validDay"></InputNumber>
      </FormItem>
      <FormItem label="图片">
        <upload ref="upload"
                :fileUploadAction="fileUploadAction"
                :multiple="multiple"
                :imageList="item.imageUrl"
                @setUrl="setUrl"
                :uploadListLength="uploadListLength"></upload>
      </FormItem>
      <FormItem label="优惠券购买医院限制">
        <Select v-model="item.hospitalId"
                filterable
                @on-query-change='remoteMethod1'
                clearable
                placeholder="请输入医院名称"
                style="width:50%;border-radius:4px">
          <Option v-for="(option, index) in options1"
                  :value="option.id"
                  :key="index">{{option.name}}</Option>
        </Select>
      </FormItem>
      <FormItem label="备注">
        <Input v-model="item.remark"
               type="textarea"
               :rows="4" />
      </FormItem>
    </Form>
    <div class="operationView">
      <Button type="primary"
              class="operation_btn"
              @click="handleCancle">取消</Button>
      <Button type="primary"
              class="operation_btn"
              @click="handleSave">保存</Button>
    </div>
  </div>
</template>

<script>
  import { activityMgt } from '@/api/codeName'
  import Upload from '@/base/upload/upload'

  export default {
    name: "couponEdit",
    data () {
      let validate = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入数字'))
        } else {
          callback()
        }
      }
      let validateCouponType = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请选择优惠券类型'))
        } else {
          callback()
        }
      }
      let validateValidDate = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请选择到期时间'))
        } else {
          callback()
        }
      }
      return {
        options3: {
          disabledDate (date) {
            return date && date.valueOf() < Date.now() - 86400000;
          }
        },
        options1: [],
        item: {
          // id: 0,
          name: '',
          image: '',
          remark: '',
          desp: '',
          validDate: '',
          validDay: null,
          couponType: null,
          orderMoney: null,
          subtractMoney: null,
          subtract: null,
          couponNum: null
        },
        fileUploadAction: this.api.file.upload,
        multiple: false,
        uploadListLength: 1,
        couponTypeList: activityMgt.couponMgt.couponType,
        rules: {
          name: [
            { required: true, message: '请输入优惠券名称', trigger: 'blur' }
          ],
          validDate: [
            { validator: validateValidDate, trigger: 'blur' }
          ],
          couponType: [
            { validator: validateCouponType, trigger: 'change' }
          ],
          validDay: [
            { validator: validate, trigger: 'blur' }
          ],
          orderMoney: [
            { validator: validate, trigger: 'blur' }
          ],
          couponNum: [
            { validator: validate, trigger: 'blur' }
          ],
          image: [
            { required: true, message: '请选择上传的图片', trigger: 'blur' }
          ]
        }
      }
    },
    mounted () {
      if (this.$route.query.id) {
        this._getViewById()
      } else {
        this.remoteMethod1('')
      }
    },
    methods: {
      remoteMethod1 (val) {
        this.post(this.api.hospitalManager.list, { "pageSize": 100, "pageStart": 0, "name": val }).then((res) => {
          this.options1 = res.data.object;
        });
      },
      handleCancle () {
        this.$router.back(-1)
      },
      handleSave () {
        this.$refs['coupon'].validate((valid) => {
          if (valid) {
            let obj = Object.assign({}, this.item)
            this.ajax({
              type: this.api.couponEdit.type,
              url: this.api.couponEdit.url,
              data: obj,
              success: (data) => {
                this.$Message.success('保存成功');
                this.handleCancle()
              },
              error: (data) => {
                this.$Message.error(data.message);
              }
            })
          }
        })
      },
      setUrl (file) {
        this.item.image = file.url
      },
      _getViewById () {
        this.ajax({
          type: this.api.couponView.type,
          url: this.api.couponView.url,
          data: {
            id: this.$route.query.id
          },
          success: (data) => {

            this.item = data.object
            this.remoteMethod1(this.item.hospitalName)
            if (!this.item.orderMoney) {
              this.item.orderMoney = null;
            }
            if (!this.item.orderMoney) {
              this.item.orderMoney = null;
            }
            if (!this.item.subtractMoney) {
              this.item.subtractMoney = null;
            }
            if (!this.item.subtract) {
              this.item.subtract = null;
            }
            this.$refs.upload.setImg(this.item.image)
            this.item.validDate = this.commonFunction.timeFormat(this.item.validDate).withoutHMS
          },
          error: (data) => {
            this.$Message.error(data.message);
          }
        })
      }
    },
    components: {
      Upload
    }
  }
</script>

<style scoped lang="scss" type="text/scss" rel="stylesheet/scss">
  .couponEdit {
  }
</style>
